import React from 'react';
import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
} from 'react-native';

import BasePage from '../common/BasePage';
import Config from '../../config';
import SizeUtils from '../../common/SizeUtils';
import TImage from '../../components/TImage';
import TButton from '../../components/TButton';
import Constants from '../../common/Constants';
import SportDibiaoDetailRequestSelfData from '../../actions/sport/SportDibiaoDetailRequestSelfData';
export default class SportDibiaoDetailPage extends BasePage {
  constructor(props) {
    super(props);
    this._defaultIcon = {icon:require('../../../resource/images/sport/dibiao/5.png'), width:138, height:138};
  }

   componentDidMount() {
    if(this._getData().landmark_id){
      this._requestData(this._getData().landmark_id);
      this.isload = false;
    }else {
      this.isload = true;
    }
  }

  componentWillUpdate(nextProps, nextState) {
    if(nextState.isResponeUpdate == true){
      this.props.pageData.routeData.dibiaoData = nextState.data;
      this.isload = true;
      nextState.isResponeUpdate  = false;
    }
  }

  _dealEnterPage() {
    super._dealEnterPage();

    if(this._getData().landmark_id){
      this._requestData(this._getData().landmark_id)
      this.isload = false;
    }else {
      this.isload = true;
    }
  }

  _requestData(landmark_id){
    new SportDibiaoDetailRequestSelfData().call(this,{landmark_id:landmark_id,user_id:this.props.pageData.routeData.userData.user_id});
  }



  _dealRender() {
    return (
      <ScrollView style={{backgroundColor:"#51bbe9", width:SizeUtils.getWindowSize().width,
          height:SizeUtils.getWindowSize().height}}
            alwaysBounceVertical={false}
            showsVerticalScrollIndicator={false}>
          {this._renderTop()}
          {this._renderMid()}
          {this._renderBottom()}
      </ScrollView>
    )
  }

  _getData() {
    return this.props.pageData.routeData.dibiaoData;
  }

  _renderTop() {
    if(!this.isload){
      return;
    }
    var source = this._getData().done === true ? {uri:this._getData().image_url} : this._defaultIcon.icon;
    return (
      <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(165), flexDirection:"row", alignItems:"center",
          justifyContent:"center"}}>
        <TImage source={source} style={{width:550, height:550}}/>
      </View>
    )
  }

  _renderMid() {
    if(!this.isload){
      return;
    }
    return (
      <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(100), flexDirection:"column",
          alignItems:"center"}}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(80), color:"#ffffff", fontWeight:"bold",
            paddingLeft:SizeUtils.translateDesignWidthToCode(40),
            paddingRight:SizeUtils.translateDesignWidthToCode(40),}}>
          {this._getData().name}
        </Text>
        <Text style={{paddingTop:SizeUtils.translateDesignHeightToCode(54),
            paddingLeft:SizeUtils.translateDesignWidthToCode(40),
            paddingRight:SizeUtils.translateDesignWidthToCode(40),
            fontSize:SizeUtils.translateFontSizeToCode(28), color:"#ffffff"}}>
          {this._getDesc()}
        </Text>
      </View>
    )
  }

  _getDesc() {
    //done (integer, optional): 是否达成，0否，1是 = ['0', '1'],
    if(this._getData().done === 1) {
      return this._getData().desc;
    }
    return this._getData().task_desc;
  }

  _renderBottom() {
    if(!this.isload){
      return;
    }
    return (
      <View style={{width:SizeUtils.getWindowSize().width, flexDirection:"row", justifyContent:"center",
          paddingTop:SizeUtils.translateDesignHeightToCode(102), paddingBottom:SizeUtils.translateDesignHeightToCode(50)}}>
        <TButton label="好的，我知道了" style={{width:SizeUtils.translateDesignWidthToCode(420),
            height:SizeUtils.translateDesignHeightToCode(84)}} onPress={this._onPressSubmit.bind(this)}
          color="#4890ce" />
      </View>
    )
  }

  _onPressSubmit() {
    this.goBack();
  }
}
